<template>
  <div class="import">
    <el-dialog title="产品导入" :visible.sync="visible" width="600px" center
               :before-close="close"
               :close-on-click-modal="false" :close-on-press-escape='false'>
      <ul class="importProduct">
        <li>
          <span class="label">下载产品模板：</span> <a href="javascript:void(0)" @click="downProduct">产品模板.xlsx</a>
        </li>
        <li>
          <span class="label">按照模版导入产品：</span>
          <b class="btn" @click="chooseFile">导入产品</b>
          <span class="detail" v-show="form.file||loading">文件：<a href="" class="more">{{form.file.name}}</a>
            </span>
        </li>
        <li>
          <span class="label">选择产品目录：</span>
          <el-select v-model="form.type" >
            <el-option label="公司目录" value="0" v-show="permission.product_company_import"></el-option>
            <el-option label="自建目录" value="1"></el-option>
          </el-select>
        </li>
      </ul>
      <div class="message">
        <span>注意：</span>
        <p>请按模版录入，支持导入Excel2007及以上版本.xlsx后缀的文件，导出完成后需刷新页面。如果产品编码和企业产品或者其他业务员的个人产品重复，将被直接忽略，不执行覆盖或者不追加操作。</p>
      </div>
      <!-- 导入结果显示-->
      <a href="javascript:void(0)" v-show="isDone">
        <p class="state" v-if="errorInfo">导入产品失败! <b v-text="errorInfo"></b></p>
        <p class="state active" v-else>导入产品成功!  <b v-text="successInfo"></b><a href="javascript:void(0)" @click="$router.push('/product/set')">查看详情</a></p>
      </a>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button size="mini" @click="close">取 消</el-button>
        <el-button size="mini" type="primary" @click="submit"
                   :disabled="loading" :loading="loading">{{loading?'导入中':'确 定'}}</el-button>
      </div>
      <input type="file" @change="upload" ref="fileTarget" accept=".xlsx,.xls" hidden>
    </el-dialog>
  </div>
</template>

<script>
    import {downProduct, importSpec} from '@/api/product/import'
    import {downTemplate} from '@/util/util'
    import {mapGetters} from "vuex";
    export default {
        name: "DialogImport",
        props: ['ID'],
        data() {
            return {
                visible: false,
                loading: false,
                treeOptions: [],
                form: {
                    type: '0',
                    file: ''
                },
                errorInfo: '',
                isDone: false,
                successInfo:''
            }
        },
        computed: {
            ...mapGetters(["permission"]),
        },
        mounted(){
            this.form.type=this.permission.product_company_import?'0':'1';
        },
        methods: {
            init() {
                this.visible = true
            },
            submit() {
                if(!this.form.file)return;
                this.loading = true;
                let formData = new FormData();
                formData.append("file", this.form.file);
                formData.append("type", this.form.type);
                importSpec(formData).then(res => {
                    this.form.file='';
                    this.isDone = true;
                    this.loading = false;
                    console.log(res)
                    if (res.data.code==200) {
                        this.successInfo=res.data.data;
                    } else {
                        this.errorInfo = res.data.msg;
                    }
                    this.$refs.fileTarget.value=''
                }).catch((err) => {
                    this.$refs.fileTarget.value=''
                    this.isDone = true;
                    this.loading = false;
                })
            },
            chooseFile() {
                this.$refs.fileTarget.dispatchEvent(new MouseEvent('click'))
            },
            upload(event) {
                this.form.file = event.target.files[0]
            },
            downProduct() {
                downProduct().then(res => {
                    downTemplate(res.data, "产品模板.xlsx")
                })
            },
            close() {
                this.visible = false;
                this.$refs.fileTarget.value='';
                this.form = {
                    type: '',
                    file: ''
                };
                this.errorInfo = '';
                this.isDone = false;
            }
        }
    }
</script>

<style scoped lang="scss">
  $activeColor: #2A97F9;
  .import {
    ul {
      width: 490px;
      font-size: 14px;
      padding: 0 10px !important;

      li {
        display: flex;
        margin-bottom: 15px;
        align-items: center;

        .label {
          display: inline-block;
          width: 150px;
          font-weight: 600;
          color: #232323;
        }

        a {
          color: $activeColor;
          width: 180px;;
          text-decoration: underline;
          display: inline-block;
        }

        b {
          font-weight: normal;
        }
        .el-select,
        .btn {
          display: inline-block;
          color: #232323;
          width: 110px;
          text-align: center;
          line-height: 37px;
          background: rgba(243, 243, 243, 1);
          border-radius: 10px;
        }
        .el-select{
          border: none;
        }
        .detail {
          display: flex;
          align-items: center;
          padding-left: 10px;
          font-size: 12px;

          b {
            color: #DF3736;
            font-size: 13px;
            margin-left: 10px;
            width: 56px;
          }

          b.success {
            color: #87CE9F;
          }
        }
      }
    }

    .message {
      display: flex;
      font-size: 12px;
      color: #8C8C8C;
      line-height: 20px;
      padding: 0 10px;

      span {
        display: inline-block;
        width: 82px;
      }
    }

    .state {
      width: 490px;
      line-height: 37px;
      text-align: center;
      background: #E9F3FD;
      border-radius: 10px;
      color: #DF3736;
      font-size: 14px;
      margin: 10px auto !important;

      a {
        text-decoration: underline;
        color: $activeColor;
        margin-left: 5px;
      }
    }

    .state.active {
      color: #87CE9F;
    }
  }
</style>
